<template>
  <view>
    <view class="tips">
      <u-icon name="info-circle" color="white" size="30rpx"></u-icon>
      <text>尚未进行实名认证，您必须通过实名认证后才能参加福利活动</text>
    </view>
    <view class="info">
      <view class="title">身份证信息</view>
      <view class="content">信息仅用于身份认证，我们将会保障您的信息安全</view>
      <view class="form">
        <u-form :model="form" ref="uForm" label-width="120rpx">
          <u-form-item label="真实姓名">
            <u-input v-model="form.name" placeholder="请输入真实姓名"/>
          </u-form-item>
          <u-form-item label="身份证号">
            <u-input v-model="form.intro" placeholder="请输入身份证号"/>
          </u-form-item>

        </u-form>
      </view>
      <view class="">
        <u-button :custom-style="{ background: 'black', color: 'white',marginTop:'64rpx' }"
                  @click="next">
          下一步
        </u-button>
      </view>
      <view class="tipBottom">
        <u-icon name="lock"></u-icon>
        个人信息加密保护中
      </view>
    </view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {}
    }
  },
  methods: {
    next() {

    }
  }
}
</script>

<style lang="scss" scoped>
.tips {
  background-color: black;
  padding-top: 11rpx;
  padding-bottom: 15rpx;
  color: white;
  font-size: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
margin: auto;
  text {
    padding-left: 10rpx;
  }
}

.info {
  padding:29rpx 75rpx 0 75rpx;

  .title {
    font-size: 40rpx;
    font-weight: bold;
  }

  .content {
    font-size: 24rpx;
    color: #999999;
    padding-top: 26rpx;
  }
  .form{
    margin-top: 57rpx;
  }
}

.tipBottom {
  margin-top: 15rpx;
  text-align: center;
  font-size: 24rpx;
  color: #999999;
}
</style>
